
import { Component,OnInit} from '@angular/core';
import{ animate,style,transition,trigger,state} from '@angular/animations'
import { MainService } from '../../service/main.service';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
  animations: [
    trigger('imgMove', [
      /** 不显示 */
      state('off', style({'display': 'none', 'z-index': '0','opacity':'0'})),
      /** 上一张图片 */
      state('prev', style({'z-index': '1','opacity':'0'})),
      /** 下一张图片 */
      state('next', style({'z-index': '2','opacity':'0'})),
      /** 当前图片 */
      state('on', style({'z-index': '3','opacity':'1'})),
      transition('prev=>on', [
       animate('2s ease-in-out')
      ]),
      transition('next=>on', [
       animate('2s ease-in-out')
      ]),
      transition('on=>prev', [
       animate('2s ease-in-out')
      ]),
      transition('on=>next', [
       animate('2s ease-in-out')
      ])
     ])
    ]
 }
)
export class HeaderComponent implements OnInit {
public imgs; 
public current;
imgUrl
  constructor(private service:MainService) {
    this.current=0;
this.imgUrl=service.picUrl;
service.getFromServ('/api/banner/get_top_banner',{},res=>{
console.log(res);
this.imgs=res.data
},err=>{})
      var _that = this
    setInterval(function(){
        _that.Next(); 
    },3000)
   
   }

  ngOnInit() {
   
  }
  public ImgState(index) {
    if (this.imgs && this.imgs.length) {
     if (this.current === 0) {
      return index === 0 ? 'on' :
      index === 1 ? 'next' :
      index === this.imgs.length - 1 ? 'prev' :
      'off';
     } else if (this.current === this.imgs.length - 1) {
      return index === this.imgs.length - 1 ? 'on' :
      index === this.imgs.length - 2 ? 'prev' :
      index === 0 ? 'next' :
      'off';
     }
     switch (index - this.current) {
      case 0:
       return 'on';
      case 1:
       return 'next';
      case -1:
       return 'prev';
      default:
       return 'off';
     }
    } else {
     return 'off';
    }
   }
   public Next() {
     if(this.imgs){
        this.current = (this.current + 1) % this.imgs.length;   
     }
   
   }
   public Prev() {
     if(this.imgs){
       this.current = this.current - 1 < 0 ? this.imgs.length - 1 : this.current - 1;
     }
    
   }
   
    
  

   
}
